<template>
<div style="height: 580px;width: 400px;">
    <van-swipe style="height: 580px; background-color: white" vertical  @change="hd()" :show-indicators="false" >
        <van-swipe-item :initial-swipe="1">
        <video :src="urls" style="height: 560px;width: 400px" controls loop autoplay >
        </video>
        </van-swipe-item>
        <van-swipe-item :initial-swipe="2">
            <div>
                <video :src="urls1" style="height: 560px;width: 400px;" controls loop autoplay>
                </video>
            </div>
        </van-swipe-item>
    </van-swipe>

    <van-image
            id="img"
            round
            width="2.5rem"
            height="2.5rem"
            :src="path"
    />

    <van-icon v-show="gzshow" id="img1" name="add-o" @click="gz()" />

    <van-icon id="img2" :style="{backgroundColor:likebackcolor}" name="like-o" @click="xh()" />

    <span id="sp1">{{likecount}}</span>

    <van-icon id="img3" name="chat-o" @click="cheats()" />

    <span id="sp2">{{cheatcount}}</span>

    <van-icon  id="img4" @click="shangpin()" name="shopping-cart-o" />

    <span id="sp3">{{zfcount}}</span>

    <van-icon @click="sc()" id="img5" :style="{backgroundColor:sccolor}" name="star-o" />

    <span id="sp4">{{sccount}}</span>

    <div id="cheat" v-show="shows">
        <van-cell-group>
            <van-cell v-for="u in describ" :icon="u.lujing"  :title="u.user"  :label="u.cheat" />
        </van-cell-group>
    </div>
    <van-icon id="xxx" name="cross" v-show="shows" @click="no()" />

    <div id="user">
        <van-icon @click="zy()" name="https://cdn.jsdelivr.net/npm/@vant/assets/icon-demo.png" />
    </div>

    <div id="pl" v-show="shows">
        <van-cell-group inset>
            <van-field
                    v-model="sms"
                    center
                    clearable
                    placeholder="请输入评论内容"
            >
                <template #button>
                    <van-button @click="pinglun()" size="small" type="primary">评论</van-button>
                </template>
            </van-field>
        </van-cell-group>
    </div>

    <div id="search">
        <van-icon @click="ss()" name="search" />
    </div>

</div>

</template>
<script>
    import { Toast } from 'vant';
    import Cheat from "../components/pinglun";
export default {
    components: {Cheat},
    data(){
        return{
            index:1,
            urls:"",
            urls1:"",
            likecount:50,
            cheatcount:50,
            zfcount:50,
            sccount:50,
            likebackcolor:"",
            path:"",
            tag:0,
            id:0,
            describ:[],
            shows:false,
            cheaturl:"",
            gzshow:true,
            sccolor:"",
            user:"",
            urlall:"",
            sms:""
        }
    },
    methods:{
        hd(){
            if (this.index%2!=0){
                this.axios.get("http://localhost:8081/api/all.do").then((response) => {
                    console.log(response.data);
                    console.log(this.index)
                    //response.data 等同于R
                    this.urls1=response.data.data.url;
                    this.urlall=response.data.data.url;
                    this.path =response.data.data.imgurl;
                    this.likecount=response.data.data.likecount;
                    this.cheatcount=response.data.data.cheatcount;
                    this.zfcount=response.data.data.zfcount;
                    this.sccount=response.data.data.sccount;
                    this.id=response.data.data.id;
                    this.user=response.data.data.user
                    if (response.data.data.gztag==1){
                        this.gzshow=false;
                    }else {
                        this.gzshow=true;
                    }

                    //this.$store.commit("setUrls",response.data.data.url);
                    this.urls=""
                    this.index++
                    this.likebackcolor=""
                })
            }else {
                this.axios.get("http://localhost:8081/api/all.do").then((response) => {
                    console.log(response.data);
                    console.log(this.index)
                    //response.data 等同于R
                    this.urls=response.data.data.url;
                    this.urlall=response.data.data.url;
                    this.path =response.data.data.imgurl;
                    this.likecount=response.data.data.likecount;
                    this.cheatcount=response.data.data.cheatcount;
                    this.zfcount=response.data.data.zfcount;
                    this.sccount=response.data.data.sccount;
                    this.user=response.data.data.user
                    //this.$store.commit("setUrls",response.data.data.url);

                    if (response.data.data.gztag==1){
                        this.gzshow=false;
                    }else {
                        this.gzshow=true;
                    }
                    this.urls1=""
                    this.index++
                    this.likebackcolor=""
                })
            }
        },
        gz(){
            this.gzshow = false
            this.axios.post("http://localhost:8081/api/charu.do",{
                gzuser:this.user
            })
                .then(function (res) {
                    if (res.data.code==200){
                        Toast('关注成功');
                    }
                })
        },
        xh(){
            console.log(888)
            if (this.likebackcolor == ""){
                this.likebackcolor = "red"
                this.likecount++
                console.log(this.likecount)
                this.axios.post("http://localhost:8081/api/update.do",{
                    "likecount":this.likecount,
                    "id":this.id
                })
                    .then(function (res) {

                    })

                this.axios.post("http://localhost:8081/api/insert.do",{
                    "dzurl":this.urlall,
                    "dzuser":this.user,

                })
                    .then(function (res) {
                        if (res.data.code==200){
                            Toast('喜欢成功');
                        }
                    })
            }
        },
        cheats(){
            this.shows=true
            var that = this;
            if (this.urls == ""){
                this.axios.post("http://localhost:8081/api/cheat.do",{
                    "cheaturl":this.urls1
                })
                    .then(function (res) {
                        that.describ = res.data.data
                        console.log(res.data.data)
                    })
            }else {
                this.shows=true
                this.axios.post("http://localhost:8081/api/cheat.do",{
                    "cheaturl":this.urls
                })
                    .then(function (res) {
                        that.describ = res.data.data
                        console.log(res.data.data)
                    })
            }
        },
        no(){
            this.shows=false
        },
        sc(){
            if (this.sccolor==""){
                this.sccolor="yellow"
                this.sccount++

                this.axios.post("http://localhost:8081/api/update.do",{
                    sccount:this.sccount,
                    id:this.id
                })
                    .then(function (res) {
                        if (res.data.code == 200){

                        }
                    })

                this.axios.post("http://localhost:8081/api/scinsert.do",{
                    "scurl":this.urlall,
                    "scuser":this.user,

                })
                    .then(function (res) {
                        if (res.data.code==200){
                            Toast('收藏成功');
                        }
                    })
            }

        },
        zy(){
            this.$router.push({path:"/myitem"})
        },
        pinglun(){
            this.axios.post("http://localhost:8081/api/plinsert.do",{
                "cheat":this.sms,
                "cheaturl":this.urlall,

            })
                .then(function (res) {
                    if (res.data.code==200){
                        Toast('评论成功');
                    }
                })

            this.sms=""
            this.cheatcount++

            this.axios.post("http://localhost:8081/api/update.do",{
                "cheatcount":this.cheatcount,
                "id":this.id
            })
                .then(function (res) {

                })
        },
        ss(){
            this.$router.push({path:"/search"})
        },
        shangpin(){
            this.$router.push({path:"/shopping",query:{user:this.user}})
        }
    }
}

</script>

<style scoped>

    #img{
        position: absolute;
        right: 0;
        bottom: 350px;
    }
    #img1{
        position: absolute;
        right: 12px;
        bottom: 340px;
        color: red;
    }
    #img2{
        position: absolute;
        right: 12px;
        bottom: 300px;
    }
    #img3{
        position: absolute;
        right: 12px;
        bottom: 260px;
    }
    #img4{
        position: absolute;
        right: 12px;
        bottom: 220px;
    }
    #img5{
        position: absolute;
        right: 12px;
        bottom: 180px;
    }
    #sp1{
        position: absolute;
        right: 14px;
        bottom: 285px;
        font-size: 10px;
    }
    #sp2{
        position: absolute;
        right: 15px;
        bottom: 245px;
        font-size: 10px;
    }
    #sp3{
        position: absolute;
        right: 15px;
        bottom: 205px;
        font-size: 10px;
    }
    #sp4{
        position: absolute;
        right: 15px;
        bottom: 165px;
        font-size: 10px;
    }

    #cheat{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 500px;
        width: 100%;
        z-index: 999;
    }
    #xxx{
        position: absolute;
        bottom: 500px;
        right: 200px;
    }
    #user{
        position: absolute;
        bottom: 530px;
        left: 20px;
    }
    #pl{
        position: absolute;
        bottom: 530px;
        width: 400px;
    }
    #search{
        position: absolute;
        bottom: 530px;
        right: 20px;
    }
</style>